<template>
  <el-breadcrumb class="app-breadcrumb" separator="/">
    <transition-group name="breadcrumb">
      <el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path" :style="item.meta.title=='数据库'?'opacity:0':''">
        <!-- <span
          v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
          class="no-redirect"
        >{{ item.meta.title }}</span>
        <a v-else @click.prevent="handleLink(item)">{{ item.meta.title }}</a> -->
        <a v-if="item.redirect=='noRedirect'||index==levelList.length-1">{{ item.meta.title }}</a>
        <span v-else class="no-redirect" @click.prevent="handleLink(item)">{{ item.meta.title }}</span>
      </el-breadcrumb-item>
    </transition-group>
  </el-breadcrumb>
</template>

<script>
import pathToRegexp from 'path-to-regexp'
export default {
  data() {
    return {
      levelList: null,
      view_visible: false // 控制视图显示
    }
  },
  computed: {
    database_name() { return this.$store.state.user.getSelect.database_name },
    cur_database_name() { return this.$store.state.database.information.database_info.database_name },
    getDatabase() {
      const database_id = this.$store.state.database.database_id
      const database_info = this.$store.state.database.database_info
      return { database_id: database_id, database_info: database_info }
    },
    getSelect() {
      return this.$store.state.user.getSelect
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
      // 路由跳转，隐藏1.5秒后显示
      this.view_visible = true
      setTimeout(() => {
        this.view_visible = false
      }, 1500)
    },
    getDatabase() {
      // this.getBreadcrumb()
    },
    // 及时更新顶部导航
    getSelect: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function(newV, oldV) {
        console.log('watch中：', newV)
        // const database_name = this.$store.state.user.getSelect.database_name
        // const cur_database_name = this.$store.state.database.information.database_info.database_name
        // console.log(561513513521321132, database_name, cur_database_name)
        this.levelList = this.levelList.filter((item, index) => {
          if (index === 0) {
            item.meta.title = newV.database_name
          } else if (index === 1) {
            // item.meta.title = cur_database_name
          }
          return item
        })
      }
    }
    // getSelect(val) {
    //   const database_name = this.$store.state.user.getSelect.database_name
    //   const cur_database_name = this.$store.state.database.information.database_info.database_name
    //   console.log(561513513521321132)
    //   this.levelList = this.levelList.filter((item, index) => {
    //     if (index === 0) {
    //       item.meta.title = database_name
    //     } else if (index === 1) {
    //       item.meta.title = cur_database_name
    //     }
    //     return item
    //   })
    // }
  },
  async created() {
    await this.getBreadcrumb()
    console.log(656464684684984)
  },
  mounted() {
    // this.$nextTick(() => {
    //   this.getBreadcrumb()
    // })
    // EventBus.$on('sendBreadcrumb', () => {
    //   console.log('dnflkgndflkgnlkdfng')
    //   this.getBreadcrumb()
    // })
  },
  updated() {

  },
  methods: {
    getBreadcrumb() {
      // only show routes with meta.title
      const matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      const first = matched[0]

      if (!this.isDashboard(first)) {
        // matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
      }
      const levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
      const database_id = this.getDatabase.database_id
      // const database_info = this.getDatabase.database_info
      // const database_name = this.$store.state.user.getSelect.database_name
      // const cur_database_name = this.$store.state.database.information.database_info.database_name
      // 有总库id则面包屑导航插入，总库名称
      if (database_id) {
        // const res = database_info
        // 动态插入选择数据库名称
        this.levelList = levelList.filter((item, index) => {
          if (index === 0) {
            item.meta.title = this.database_name
          } else if (index === 1) {
            item.meta.title = this.cur_database_name
          }
          return item
        })
        return
      }
      this.levelList = levelList
    },
    isDashboard(route) {
      const name = route && route.name
      if (!name) {
        return false
      }
      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
    },
    pathCompile(path) {
      // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
      const { params } = this.$route
      var toPath = pathToRegexp.compile(path)
      return toPath(params)
    },
    handleLink(item) {
      const { redirect, path } = item
      if (redirect) {
        this.$router.push(redirect)
        return
      }
      this.$router.push(this.pathCompile(path))
    }
  }
}
</script>

<style lang="scss" scoped>
.app-breadcrumb.el-breadcrumb {
  display: inline-block;
  font-size: 14px;
  line-height: 50px;
  margin-left: 8px;
  //视图显示
  .view-visible{
    display: none;
  }
  .no-redirect {
    color: #97a8be;
    cursor: text;
    cursor: pointer;
  }
}
</style>
